<template>
	<view @touchmove.stop.prevent="() => false">
		<view class="mask" v-if="show">
			<view class="mask-main">
				<view class="mask-content">
					<view style="width: 100%; text-align: right; margin-bottom: 20rpx">
						<image @click="closeEvent" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/close_ss.png"
							style="width: 48rpx; height: 48rpx; margin-left: auto; margin-right: 0rpx"></image>
					</view>
					<canvas canvas-id="canvasMy" :style="{ width: width + 'px', height: height + 'px' }"
						style=""></canvas>
					<view class="save_btn" @click="saveImage">保存图片</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'save-img-pop-view',
		data() {
			return {
				width: '',
				height: 247,
				count: 2,
				newestWeightData: '',
				userInfo: '',
				anvasImages: '',
				// mainData:''
			};
		},
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			mainData: {
				type: Object,
				default: () => {},
			},
		},
		computed: {
			screenWidth() {
				const width = this.$store.getters.getScreenWidth || 0;
				return width * 0.92;
			},
		},
		watch: {
			mainData: {
				handler(newValue, oldValue) {
					this.mainData = this.mainData;
					this.init();
				},
			},
			show: {
				handler(newValue, oldValue) {
					// this.show = this.show
					if (this.show) {
						this.init();
					}
				},
			},
			deep: true, // 需要监测数据变化的时候需要深度监听
		},
		mounted() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.width = Number((res.screenWidth * 0.92).toFixed(0));
					that.init();
				},
			});
		},
		methods: {
			async posterWidth() {
				if (this.width) {
					return this.width;
				}
				let width;
				await uni.getSystemInfo({
					success: function(res) {
						width = Number((res.screenWidth * 0.92).toFixed(0));
					},
				});
				this.width = width;
				return width;
			},
			async init() {
				let that = this;
				let goodsicon5 = '';
				let weightNUM = 0;
				let weightNUM1 = 0;
				let weightName = '';
				let goodsImgUrl = '/static/img/logo_min.png';
				let goodsImgUrl1 = '/static/img/homeuserdata/user_data_girl.png';
				let goodsicon1 = '/static/img/homeuserdata/user_data_bim.png';
				let goodsicon2 = '/static/img/homeuserdata/user_data_zf.png';
				let goodsicon3 = '/static/img/homeuserdata/user_data_jr.png';
				let goodsicon4 = '/static/img/homeuserdata/user_data_gl.png';

				goodsicon5 = '/static/img/homeuserdata/user_data_qipao.png';
				that.mainData.weight = that.mainData.weight ? that.mainData.weight : 0;
				if (that.mainData.nickname) {
					if (that.mainData.nickname.length > 12) {
						weightName = that.mainData.nickname.slice(0, 12) + '...';
					} else {
						weightName = that.mainData.nickname;
					}
				} else if (that.mainData.name) {
					if (that.mainData.name.length > 12) {
						weightName = that.mainData.name.slice(0, 12) + '...';
					} else {
						weightName = that.mainData.name;
					}
				}
				if (that.mainData.weight) {
					if (that.mainData.weight.toString('').length == 4) {
						weightNUM = 90;
						weightNUM1 = 105;

					}
					if (that.mainData.weight.toString('').length == 5) {
						weightNUM = 115;
						weightNUM1 = 130;
					} else if (that.mainData.weight == 0) {
                        that.mainData.weight='0.00';
                        weightNUM = 90;
                        weightNUM1 = 105;
						// weightNUM = 40;
						// weightNUM1 = 55;
					}
				}
				let goodsImg = await that.getImageInfo(that.mainData.avatarAbsolute).catch(()=>({path:''}));

				// setTimeout(()=>{
				var ctx = uni.createCanvasContext('canvasMy', this);
				// / 1.填充背景色，白色
				const screenWidth = await that.posterWidth();
				try {
					that.fillRoundRect(ctx, 0, 0, screenWidth, that.height, 10, '#E0EDE9');
					// 人物头像
					goodsImg.path&&that.drawCircular(ctx, goodsImg.path, 15, 15, 24, 24);
					// 昵称
					that.drawText(14, '#333333', 'left', weightName, 44, 31, ctx, 1);
					ctx.drawImage(goodsImgUrl, screenWidth - 69, 17, 54, 20);
					that.drawText(36, '#234941', 'left', that.mainData.weight || '-', 17, 98, ctx, 1, 700);
					that.drawText(14, '#234941', 'left', 'kg', weightNUM, 98, ctx, 1, 500);

					ctx.drawImage(goodsicon5, weightNUM1, 67, 34, 18);


					that.drawText(11, '#ffffff', 'left', that.mainData.fatDegreeName, weightNUM1 + 7, 80, ctx, 1, 500);
					that.drawText(
						11,
						'#234941',
						'left',
						that.request.formatDate('m-d h:i', that.mainData.lastRecordTime) + '更新',
						17,
						118,
						ctx,
						1,
						400,
					);
					// 小女孩
					ctx.drawImage(goodsImgUrl1, screenWidth - 155, 40, 120, 104);
					// 圆角矩形
					that.fillRoundRect(ctx, 15, that.height - 108, screenWidth - 30, 93, 10, '#fff');
					ctx.drawImage(goodsicon1, 30, that.height - 93, 24, 24);
					that.drawText(10, '#999', 'left', 'BIM：', 60, that.height - 85, ctx, 1, 400);
					that.drawText(13, '#234941', 'left', that.mainData.bim || '-', 60, that.height - 65, ctx, 1, 400);

					ctx.drawImage(goodsicon2, 134, that.height - 93, 24, 24);
					that.drawText(10, '#999', 'left', '体脂率：', 164, that.height - 85, ctx, 1, 400);
					that.drawText(
						13,
						'#234941',
						'left',
						that.mainData.bodyFatRatio ? that.mainData.bodyFatRatio + '%' : '-',
						164,
						that.height - 65,
						ctx,
						1,
						400,
					);

					ctx.drawImage(goodsicon3, screenWidth - 99, that.height - 93, 24, 24);
					that.drawText(10, '#999', 'left', '肌肉率：', screenWidth - 69, that.height - 85, ctx, 1, 400);
					that.drawText(
						13,
						'#234941',
						'left',
						that.mainData.muscleRatio ? that.mainData.muscleRatio + '%' : '-',
						screenWidth - 69,
						that.height - 65,
						ctx,
						1,
						400,
					);

					ctx.drawImage(goodsicon2, 30, that.height - 53, 24, 24);
					that.drawText(10, '#999', 'left', '脂肪含量', 60, that.height - 45, ctx, 1, 400);
					that.drawText(
						13,
						'#234941',
						'left',
						that.mainData.fatContent ? `${that.mainData.fatContent}kg` : '-',
						60,
						that.height - 25,
						ctx,
						1,
						400,
					);

					ctx.drawImage(goodsicon3, 134, that.height - 59, 24, 24);
					that.drawText(10, '#999', 'left', '肌肉重量', 164, that.height - 45, ctx, 1, 400);
					that.drawText(
						13,
						'#234941',
						'left',
						that.mainData.muscleWeight ? `${that.mainData.muscleWeight}kg` : '-',
						164,
						that.height - 25,
						ctx,
						1,
						400,
					);

					ctx.drawImage(goodsicon4, screenWidth - 99, that.height - 49, 24, 24);
					that.drawText(10, '#999', 'left', '骨骼肌率', screenWidth - 69, that.height - 45, ctx, 1, 400);

					that.drawText(
						13,
						'#234941',
						'left',
						that.mainData.skeletalMuscleRatio ? that.mainData.skeletalMuscleRatio + '%' : '-',
						screenWidth - 69,
						that.height - 25,
						ctx,
						1,
						400,
					);
				} catch (e) {
					console.log('渲染图片失败回调', e);
				}

				setTimeout(function() {
					ctx.draw(true, (ret) => {
						setTimeout(() => {
							uni.canvasToTempFilePath({
									// 保存canvas为图片
									canvasId: 'canvasMy',
									quality: 1,
									width: screenWidth,
									height: that.height,

									complete: (res) => {
										// 在H5平台下，tempFilePath 为 base64,
										// 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
										that.anvasImages = res.tempFilePath;
									},
								},
								that,
							);
						}, 100);
					});
				}, 50);

				// },1000)
			},
			saveImage() {
				this.$emit('saveImage', this.anvasImages);
			},
			async drawRoundImageToCanvas(
				context,
				image,
				x,
				y,
				width,
				height,
				radian_1 = 0,
				radian_2 = -1,
				radian_3 = -1,
				radian_4 = -1,
			) {
				context.save();
				this.drawRoundPath(context, x, y, width, height, radian_1, radian_2, radian_3, radian_4);
				context.drawImage(await this.handleNetworkImgaeTransferTempImage(image), x, y, width, height);
				context.restore();
			},
			drawCircular(ctx, url, x, y, width, height) {
				//画圆形头像
				var avatarurl_width = width;
				var avatarurl_heigth = height;
				var avatarurl_x = x;
				var avatarurl_y = y;
				ctx.save();
				ctx.beginPath();
				ctx.arc(
					avatarurl_width / 2 + avatarurl_x,
					avatarurl_heigth / 2 + avatarurl_y,
					avatarurl_width / 2,
					0,
					Math.PI * 2,
					false,
				);
				ctx.clip();
				ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
				ctx.restore();
			},

			async getImageInfo(imgSrc) {
				return new Promise((resolve, errs) => {
					if (imgSrc) {
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								resolve(image);
							},
							fail(err) {
								errs(err);
							},
						});
					} else {
						errs();
					}
				});
			},
			drawText(size, color, align, content, drawX, drawY, ctx, pixelRatio, weight) {
				ctx.setFontSize(size / pixelRatio);
				ctx.setFillStyle(color);
				ctx.setTextAlign(align);
				ctx.fillText(content, drawX / pixelRatio, drawY / pixelRatio, weight);
			},

			drawRoundPath(context, x, y, width, height, radian_1 = 0, radian_2 = -1, radian_3 = -1, radian_4 = -1) {
				// 设置弧度
				radian_2 = radian_2 === -1 ? radian_1 : radian_2;
				radian_3 = radian_3 === -1 ? radian_1 : radian_3;
				radian_4 = radian_4 === -1 ? radian_1 : radian_4;

				// 创建路径 - 绘制带圆边的矩形
				context.beginPath();
				context.moveTo(x + width / 2, y);
				context.arcTo(x + width, y, x + width, y + height, radian_1);
				context.arcTo(x + width, y + height, x, y + height, radian_2);
				context.arcTo(x, y + height, x, y, radian_3);
				context.arcTo(x, y, x + width, y, radian_4);
				// 关闭路径 - 结束绘制
				context.closePath();
				context.strokeStyle = 'transparent';
				context.stroke();
				context.clip();
			},
			handleNetworkImgaeTransferTempImage(url) {
				return new Promise((resolve) => {
					if (url.indexOf('https') === 0) {
						uni.downloadFile({
							url,
							success: (res) => {
								resolve(res.tempFilePath);
							},
						});
					} else {
						resolve(url);
					}
				});
			},
			fillRoundRect(cxt, x, y, width, height, radius, /*optional*/ fillColor) {
				let _this = this;
				//圆的直径必然要小于矩形的宽高
				if (2 * radius > width || 2 * radius > height) {
					return false;
				}

				cxt.save();
				cxt.translate(x, y);
				//绘制圆角矩形的各个边
				_this.drawRoundRectPath(cxt, width, height, radius);
				cxt.fillStyle = fillColor || '#000'; //若是给定了值就用给定的值否则给予默认值
				cxt.fill();
				cxt.restore();
			},
			drawRoundRectPath(cxt, width, height, radius) {
				cxt.beginPath(0);
				//从右下角顺时针绘制，弧度从0到1/2PI
				cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2);

				//矩形下边线
				cxt.lineTo(radius, height);

				//左下角圆弧，弧度从1/2PI到PI
				cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI);

				//矩形左边线
				cxt.lineTo(0, radius);

				//左上角圆弧，弧度从PI到3/2PI
				cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2);

				//上边线
				cxt.lineTo(width - radius, 0);

				//右上角圆弧
				cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2);

				//右边线
				cxt.lineTo(width, height - radius);
				cxt.closePath();
			},

			closeEvent() {
				this.$emit('close');
			},
		},
	};
</script>

<style scoped>
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
	}

	.mask-main {
		height: 100%;
		height: 100%;
		position: relative;
	}

	.mask-content {
		position: absolute;
		left: 4%;
		width: 92%;
		top: 30%;
		z-index: 9999;
	}

	.save_btn {
		width: 92%;
		margin-top: 38rpx;
		height: 88rpx;
		margin-left: 4%;
		background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(55, 168, 148, 0.2);
		border-radius: 24rpx;
		color: #fff;
		font-size: 30rpx;
		line-height: 88rpx;
		text-align: center;
	}

	/* 	.pop_view {
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
	}
	.middle_view {
		margin-top: 30rpx;
		background: #E0EDE9;
		border-radius: 24rpx;
		width: 100%;
		height: 494rpx;
		display: flex;
		flex-direction: column;
	}
	.user_in_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;
		margin-top: 30rpx;
		width: calc(100% - 60rpx);
	}
	.user_flow_row {
		display: flex;
		flex-direction: row;
	}
	.middle_data_view {
		margin-left: 30rpx;
		margin-top: 10rpx;
	}
	.user_flow_column {
		display: flex;
		flex-direction: column;
	}
	.status_text {
		font-size: 22rpx;
		color: #fff;
		width: 66rpx;
		height: 36rpx;
		line-height: 36rpx;
		background-image: url("@/static/img/homeuserdata/user_data_qipao.png");
		margin-left: 22rpx;
		background-size: cover;
		text-align: center;
		padding-left: 3px;
	}
	.tz_data {
		background-color: #fff;
		margin-top: 0rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: calc(100% - 90rpx);
		border-radius: 16rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-top: 28rpx;
		padding-bottom: 28rpx;
		height: 130rpx;
		align-content: space-between;
	}
	.tz_item {
		width: calc(33.3% - 20rpx);
		display: flex;
		flex-direction: row;
		height: 48rpx;
		align-items: center;
	}
	.tz_icon {
		width: 48rpx;
		height: 48rpx;
	}
	.tz_title {
		color: #999999;
		font-size: 20rpx;
	}
	.tz_value {
		color: #234941;
		font-size: 26rpx;
		font-weight: bold;
	}
	.save_btn {
		width: 100%;
		margin-top: 38rpx;
		height: 88rpx;
		background: linear-gradient(180deg, #46C09E 0%, #156D4F 100%);
		box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(55,168,148,0.2);
		border-radius: 24rpx;
		color: #fff;
		font-size: 30rpx;
		line-height: 88rpx;
		text-align: center;
	} */
</style>
